/* MAIN DIV */
.sq-side-menu{position:fixed;top:0;left:0;width:170px;height:100%;color:white;-moz-box-shadow:1px -1px 4px rgba(0,0,0,0.2);-webkit-box-shadow:1px -1px 4px rgba(0,0,0,0.2);box-shadow:1px -1px 4px rgba(0,0,0,0.2);z-index:100}
#sidebar-nav{left:-200px;transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out}
.show-nav{left:0!important;transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-webkit-transition:all 0.4s ease-in-out}
.sq-side-menu ul{margin:0;padding:0;list-style:none}
.sq-side-menu div{/* Transform - Ease-in-out */
	-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}
.sq-side-menu a{color:white;text-decoration:none}
.sq-side-menu ul{height:100%;overflow:hidden}
.sq-side-menu ul li{display:block;width:500px;overflow:hidden;/*height:16.6667%;*/
	
/* Transform - Ease-in-out */
	-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}
/* FIRST AND SECOND VIEWS */
.sq-side-menu .first,.sq-side-menu .second{float:left;text-align:center;display:inline-table;vertical-align:middle;margin-left:0;height:100%;width:170px;padding:0 20px;position:relative}
/* ONLY FOR FIRST VIEW CONTENT */
.sq-side-menu .first .content{font-size:200%;display:table-cell;vertical-align:middle}
/* ONLY FOR SECOND VIEW CONTENT */
.sq-side-menu .second .content{font-size:16px;font-size:0;font-family:"Open_Sans_L";display:table-cell;vertical-align:middle;/* Transform - Rotate */
	-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}
.content > img{width:60px;height:60px}
/* LIST ITEMS HOVER STYLES */
.sq-side-menu ul li:hover .first{margin-left:-210px}
.sq-side-menu ul li:hover .second .content{font-size:150%!important;/* Transform - Rotate */
	-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
/* ACTIVE MENU ITEM */
.sq-active .first{margin-left:-170px!important}
.sq-active .second .content{font-size:150%!important;/* Transform - Rotate */
	-moz-transform:rotate(360deg)!important;-webkit-transform:rotate(360deg)!important;-o-transform:rotate(360deg)!important;-ms-transform:rotate(360deg)!important;transform:rotate(360deg)!important}
/* MENU ARROWS */
.arrow-left{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;left:0;top:40%}
.arrow-right{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;right:0;top:40%}
/* BUTTONS COLOR SCHEMES */

/*Note:We have edited this module,in order to modify colors please use original COLOR SWATCH CLASSES present inside STYLE.CSS*/

/* COLOR 1 */

/*.color-1 .first{background:#263138}
.color-1 .second{background:#1e262c}
.color-1:hover .first{background:#1e262c}
.color-1:hover .second{background:#263138}
.color-1 .arrow-right{border-right:10px solid #1e262c}
.color-1 .arrow-left{border-left:10px solid #1e262c}
*/

/* COLOR 2 */

/*.color-2 .first{background:#406155}
.color-2 .second{background:#324c43}
.color-2:hover .first{background:#324c43}
.color-2:hover .second{background:#406155}
.color-2 .arrow-right{border-right:10px solid #324c43}
.color-2 .arrow-left{border-left:10px solid #324c43}
*/

/* COLOR 3 */

/*.color-3 .first{background:#49693E}
.color-3 .second{background:#67815e}
.color-3:hover .first{background:#67815e}
.color-3:hover .second{background:#49693E}
.color-3 .arrow-right{border-right:10px solid #67815e}
.color-3 .arrow-left{border-left:10px solid #67815e}
*/

/* COLOR 4 */
.
/*color-4 .first{background:#99802E}
.color-4 .second{background:#bda782}
.color-4:hover .first{background:#bda782}
.color-4:hover .second{background:#99802E}
.color-4 .arrow-right{border-right:10px solid #bda782}
.color-4 .arrow-left{border-left:10px solid #bda782}
*/

/* COLOR 5 */

/*.color-5 .first{background:#ff5755}
.color-5 .second{background:#d84a49}
.color-5:hover .first{background:#d84a49}
.color-5:hover .second{background:#ff5755}
.color-5 .arrow-right{border-right:10px solid #d84a49}
.color-5 .arrow-left{border-left:10px solid #d84a49}
*/

/* COLOR 6 */

/*.color-6 .first{background:#A93536}
.color-6 .second{background:#822f2f}
.color-6:hover .first{background:#822f2f}
.color-6:hover .second{background:#A93536}
.color-6 .arrow-right{border-right:10px solid #822f2f}
.color-6 .arrow-left{border-left:10px solid #822f2f}
*/

/* RESPONSIVE */

/* BELOW 768px */
@media only screen and (max-width:768px){.sq-side-menu{width:150px}.sq-side-menu .first,.sq-side-menu .second{width:100px}.sq-side-menu ul li:hover .first{margin-left:-130px}.sq-side-menu ul li:hover .second .content{font-size:120%}.sq-active .first{margin-left:-130px!important}.sq-active .second .content{font-size:120%!important}}
/* BELOW 480px */
@media only screen and (max-width:480px){.sq-side-menu{width:90px}.sq-side-menu .first,.sq-side-menu .second{width:65px;padding:0 10px}.sq-side-menu ul li:hover .first{margin-left:-80px}.sq-side-menu .first .content{font-size:150%}.sq-side-menu ul li:hover .second .content{font-size:100%}.sq-active .first{margin-left:-80px!important}.sq-active .second .content{font-size:100%!important}.arrow-left,.arrow-right{display:none}}
